import React, { Component } from 'react'

export default class App extends Component {

    state = {
        note: '',
        str: '',
        str2: '',
        options: [
            { val: 'pg', label: '苹果' },
            { val: 'mg', label: '芒果' },
            { val: 'cm', label: '草莓' },
            { val: 'll', label: '榴莲' }
        ],
        sex: '',
        hobby: []

    }

    changeValue = (e)=>{
        this.setState({
            [e.target.name]: e.target.value
        })
    }


    changeHobby = (event)=>{
        // console.log(event.target.value, event.target.checked);

        // 拷贝一份数组
        const arr = [...this.state.hobby]

        // 判断是选中，还是取消选中
        if(event.target.checked){
            // 该项已经被选中，应该被加到数组中
            arr.push(event.target.value)
        }else {
            // 该项已经被取消选中了，应该在数组中将其移除掉
            const index = arr.indexOf(event.target.value)
            // console.log(index);
            arr.splice(index, 1)
        }
       
        // 重新赋值即可
        this.setState({
            hobby: arr
        })
    }

  render() {
    return (
      <div>
        <h3>{this.state.note}</h3>
        <textarea name='note' value={this.state.note} onChange={this.changeValue}></textarea>

        {/* option 中的 value 值在选择后会赋值给 this.state.str */}
        {/* 如果 option 中没有 value，那么选中后会将标签内容赋值给 this.state.str */}
        <select name="str" value={this.state.str} onChange={this.changeValue} id="">
            {/* option 加 value 选中后取值为 value 的值 */}
            {/* 不加 value 选中后，取值为标签内的内容 */}
            <option >刀削面</option>
            <option >拉面</option>
            <option >土豆牛肉</option>
            <option >鱼香肉丝</option>
        </select>
        ----- {this.state.str}

        <br />
        <select name="str2" value={this.state.str2} onChange={this.changeValue}>
            { this.state.options.map(item => (<option value={item.val} key={item.val}>{item.label}</option>)) }
        </select>
        ----- {this.state.str2}

        <br />

        {/* 单选 */}
        <label htmlFor='m'>男</label> 
        <input id='m' name='sex' value={'男'} onChange={this.changeValue} type="radio" />

        <label htmlFor='w'>女</label> 
        <input id='w' name='sex' value='女' onChange={this.changeValue} type="radio" />

        ------- 您选择的是：{this.state.sex}

        <br />

        {/* 多选 */}
        <input type="checkbox" value={'睡觉'} name='hobby' onChange={this.changeHobby} /> 睡觉
        <input type="checkbox" value={'干饭'} name='hobby' onChange={this.changeHobby} /> 干饭
        <input type="checkbox" value={'打游戏'} name='hobby' onChange={this.changeHobby} /> 打游戏
        <input type="checkbox" value={'唱跳'} name='hobby' onChange={this.changeHobby} /> 唱跳
        <input type="checkbox" value={'学习'} name='hobby' onChange={this.changeHobby} /> 学习
        <input type="checkbox" value={'运动'} name='hobby' onChange={this.changeHobby} /> 运动
        <br />
        ----- 你周末要做什么： {this.state.hobby}



      </div>
    )
  }
}
